<template>
  <div class="ctn">
    <div class="pdf-ctn">
      <!-- 要导出的部分 -->
      <div class="pdf-panel">
        <div class="pdf-inside-panel">
          <!-- <TableComponent v-for="(item, index) in 2" :key="index"></TableComponent> -->
          <EleTable class="pdf-group"></EleTable>
          <ImageComponent></ImageComponent>
          <ChartComponent></ChartComponent>
          <!-- <RichText v-for="(item, index) in 2" :key="index + 20"></RichText> -->
          <RichText></RichText>
          <pdfWord></pdfWord>
        </div>
      </div>

      <!-- 页头页尾 -->
      <div
        class="pdf-header"
        style="
          font-weight: bold;
          padding: 30px 8px;
          width: 1200px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.85);
          color: rgba(0, 0, 0, 0.85);
          position: fixed;
          top: -100vh;
        "
      >
        页头
      </div>
      <div
        class="pdf-footer"
        style="
          font-weight: bold;
          padding: 30px 8px;
          width: 100%;
          border-top: 1px solid rgba(0, 0, 0, 0.85);
          position: fixed;
          top: -100vh;
        "
      >
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 5px;
          "
        >
          我是页尾
        </div>
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
          "
        >
          第
          <div class="pdf-footer-page"></div>
          页 / 共
          <div class="pdf-footer-page-count"></div>
          页
        </div>
      </div>
    </div>
    <div>
      <el-button
        style="top: 100px; left: 0; position: fixed"
        @click="handleOutput2"
        type="primary"
      >
        点击常规导出
      </el-button>
    </div>
  </div>
</template>

<script>
import TableComponent from "../components/tableComponent.vue";
import ImageComponent from "../components/ImageComponent.vue";
import RichText from "../components/richText.vue";
import EleTable from "../components/table.vue";
import ChartComponent from "../components/echartComponent.vue";
import pdfWord from "../components/pdfWord.vue";

import { PdfLoader } from "../utils/pdfLoader";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  methods: {
    handleOutput2() {
      const loading = this.$loading({
        lock: true,
        text: "导出中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      const element = document.querySelector(".pdf-panel");
      const header = document.querySelector(".pdf-header");
      const footer = document.querySelector(".pdf-footer");

      const pdfLoader = new PdfLoader(element, {
        footer: footer,
        header: header,
        // outputType:'file',
        fileName: "自定义名字",
        direction: "l",
        format: "a3",
        isPageMessage: true,
      });
      pdfLoader.getPdf().then((res) => {
        console.log("[ 导出成功] >", res);
        loading.close();
        this.$message.success("导出成功");
      });
    },
  },
  components: {
    TableComponent,
    TableComponent,
    ImageComponent,
    RichText,
    pdfWord,
    EleTable,
    ChartComponent,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.ctn {
  padding: 100px;
  .pdf-ctn {
    width: 1200px;
    margin: 0 auto;
    .pdf-panel {
      position: relative;
      background: #fff;
    }
  }
}
</style>
